import { delete1, getById, update } from "../../services/classify";
import { Table, Space, Button, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import React from "react";
import { setUpdateVisible, fetchClassify } from "../../store/slice/classifySlice";
import { useDispatch } from 'react-redux';
const { Column } = Table;
const { confirm } = Modal;

export default function List({ show, classify, pagination }) {
  let dispatch = useDispatch();
  const handleUpdate = async (id) => {
    dispatch(fetchClassify(id));
    dispatch(setUpdateVisible(true));
  }

  const handleDel = async (id, text) => {
    console.log(id, text.state);
    confirm({
      title: '是否删除?',
      icon: <ExclamationCircleOutlined />,
      content: '删除当前类型',
      async onOk() {
        let data = await update({ _id:id, state: 0 });
        console.log(data);
        show();
      },

    });

  }
  const handleChange = ({ current, pageSize }) => {
    show({ current, pageSize });
  }
  return (
    <Table rowKey="_id" dataSource={classify} pagination={pagination} onChange={handleChange}>
      <Column title="类型" dataIndex="sort" key="sort" />
     
      <Column
        title="操作"
        key="action"
        render={(text, record) => (
          <Space size="middle">
            <Button type="primary" onClick={() => handleUpdate(record._id)}>
              修改
            </Button>
            <Button type="primary" danger onClick={() => handleDel(record._id, text)}>
              删除
            </Button>

          </Space>
        )}
      />
    </Table>
  )
}